/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="nav-bar">
        <div class="nav-group" v-for="item in stepList" :key="item.step">

            <div class="nav-item" :class="{finish: item.step < value, active: item.step === value}">
                <div class="nav-num">{{ item.step }}</div>
                <div class="nav-label">{{ item.label }}</div>
            </div>

            <div class="nav-separator" v-if="item.step < stepList.length"></div>
        </div>
    </div>
</template>

<style lang="stylus">
    .nav-bar
        background #FAF8F9
        text-align center

        .nav-group
            display inline-block
            height 50px
            line-height 50px

        .nav-item
            width: 165px;
            height: 100%;
            display: inline-block;
            text-align: center;

            .nav-num
                content: "";
                display: inline-block;
                height: 24px;
                width: 24px;
                border: 1px solid #a3a3a3;
                border-radius: 50% 50%;
                line-height: 22px;
                text-align: center;
                font-size: 15px;
                margin-right: 8px;

            .nav-label
                display: inline-block;
                font-size: 14px;

        .nav-item.active
            .nav-num
                background: #4d8dd9;
                color: #fff;
                border: 1px transparent;

            .nav-label
                color: #4d8dd9;

        .nav-item.finish
            .nav-num
                background: url('./img/ok.png');
                color: transparent;
                border: none;

            .nav-label
                color: #17C473;

        .nav-separator
            display: inline-block;
            width: 80px;
            height: 2px;
            background: #ccc;
            vertical-align: middle;
</style>

<script lang=ts>

    /**
     * Created by hjh on 2017/6/20.
     */

    interface StepItem {
        label: string,
        step: number
    }

    import { Vue, Component, Prop } from 'vue-property-decorator'

    @Component
    export default class NavBar extends Vue {
        @Prop({
            type: Array,
            'default': () => []
        }) private options!: SafeAny[]
        // TODO: type value
        @Prop() value!: SafeAny

        stepList: StepItem[] = this.options.map((label, index) => {
            return {
                label,
                step: index + 1
            };
        })
    };

</script>
